class Banner {
  constructor(ele) {
    this.outer = document.querySelector(ele)
    this.ul = document.querySelector('.img-list')
    this.ol = document.querySelector('.pointer')
    this.firstLi = this.ul.firstElementChild.cloneNode(true)
    this.leftBtn = document.querySelector('.prev')
    this.rightBtn = document.querySelector('.next')
    this.index = 1
    this.flag = true
    this.time = null
  }

  handelUl() {
    this.ul.insertBefore(this.ul.lastElementChild.cloneNode(true), this.ul.firstElementChild)
    this.ul.appendChild(this.firstLi)
    this.ul.style.left = -this.firstLi.offsetWidth + 'px'
    this.ul.style.width = this.firstLi.offsetWidth * this.ul.children.length + 'px'
  }
  handelOl() {
    for (let i = 0; i < this.ul.children.length; i++) {
      let li = document.createElement('li')
      this.ol.appendChild(li)
      if (i == 0) li.style.backgroundColor = 'red'
    }
  }
  move() {
    move(this.ul, {
      left: -this.index * this.firstLi.offsetWidth
    }, () => {
      if (this.index === 0) {
        this.index = this.ul.children.length - 2
        this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
      }
      if (this.index === this.ul.children.length - 1) {
        this.index = 1
        this.ul.style.left = -this.index * this.firstLi.offsetWidth + 'px'
      }
      for (var i = 0; i < this.ol.children.length; i++) {
        this.ol.children[i].style.backgroundColor = 'rgba(255, 255, 255, .4)'
      }
      this.ol.children[this.index - 1].style.backgroundColor = 'red'
      this.flag = true
    })
  }
  auto() {
    this.time = setInterval(() => {
      if (!this.flag) {
        return false
      }
      this.flag = false
      this.index++
      this.move()
      return false
    }, 1500)
  }


  init() {
    this.handelOl()
    this.handelUl()
    this.leftBtn.onclick = () => {
      if (!this.flag) {
        return false
      }
      this.flag = false
      this.index--
      this.move()
      return false
    }
    this.rightBtn.onclick = () => {
      if (!this.flag) {
        return false
      }
      this.flag = false
      this.index++
      this.move()
      return false
    }

    for (let i = 0; i < this.ol.children.length; i++) {
      this.ol.children[i].onclick = () => {
        if (!this.flag) {
          return false
        }
        this.flag = false
        this.index = i + 1
        this.move()
        return false
      }
    }
    this.auto()
    this.outer.onmouseover = () => {
      clearInterval(this.time)
    }
    this.outer.onmouseleave = () => {
      this.auto()
    }
  }
}


